<template>
  <var-bottom-navigation v-model:active="activeTab" fixed>
    <var-bottom-navigation-item name="Form" label="首页" icon="home" />
    <var-bottom-navigation-item name="Table" label="表格" icon="magnify" />
  </var-bottom-navigation>
</template>

<script setup>
import { ref, watch } from "vue";

const activeTab = ref("Form");
const props = defineProps({
  changeComponent: Function,
});

watch(
  () => activeTab.value,
  (name) => props.changeComponent(name)
);
</script>
